<template>

  <el-card class="cardContainer" :body-style="{ height: 'calc(100% - 78px)'}">
    <template #header>
      未完结案件
    </template>
    <div class="selectContainer">
      <div class="selectItem" style="width: 300px;">
        <span>调解时间</span>
        <el-date-picker v-model="selectData.timeRange" value-format="YYYY-MM-DD HH:mm:ss" type="daterange"
          start-placeholder="开始时间" end-placeholder="结束时间" />
      </div>


    </div>
    <el-table :data="selectData.showCases" :border="true" class="tableContainer">
      <el-table-column label="案件编号" prop="caseId" width="100">
      </el-table-column>
      <el-table-column label="申请人" prop="applicant.name">
      </el-table-column>
      <el-table-column label="被申请人" prop="respondent.name">
      </el-table-column>
      <el-table-column label="调解时间" prop="respondent.name">
        <template #default="scope">
          <span>{{ Case.getMediationTime(scope.row) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="调解状态">
        <template #default="scope">
          <span>{{ CaseStatus.getCommentByStatus(scope.row.caseState) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-tooltip content="查看详细" placement="bottom" effect="dark">
            <el-button round type="success" @click="detailedDialog.look(scope.row.caseId, scope.row)"
              icon="view"></el-button>
          </el-tooltip>

          <el-tooltip content="设置调解结果" placement="bottom" effect="dark">
            <el-button type="primary" round icon="Edit" @click="caseResultDialog.look(scope.row)"></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>

  </el-card>
  <DetailedCase v-model="detailedDialog.visible" :case="detailedDialog.case" :case-id="detailedDialog.caseId">
  </DetailedCase>
  <!--设置调解结果-->
  <el-dialog title="设置调解结果" style="width: 40vw;" v-model="caseResultDialog.visible">
    <el-form label-width="100px">
      <el-form-item label="调解结果">
        <el-select v-model="caseResultDialog.mediatorResult" clearable>
          <el-option label="调解成功" :value="1"></el-option>
          <el-option label="调解失败" :value="0"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div style="display: flex; flex-direction: row-reverse;width: 100%;">
      <el-button size="large" type="primary" @click="caseResultDialog.setResult()">提交</el-button>
    </div>

  </el-dialog>
</template>
<script lang="ts" setup>
import { getUnCompletedCaseByMediatorId, setMediationResult } from '@/axios/case/caseReq';
import { Case, CaseStatus } from '@/types/response/case';
import { computed, reactive } from 'vue';
import DetailedCase from '@/compontent/detailedCase.vue';
import useUserStore from '@/stores/userStore';
import Notice from '@/utils/notice';
let userStore = useUserStore();
let caseList: Case[] = reactive([]);
let caseIdSet = new Set();//避免重复
getUnCompletedCaseByMediatorId(userStore.userId).then(res => {
  res.forEach(item => {
    if (!caseIdSet.has(item.caseId)) {
      caseList.push(item);
      caseIdSet.add(item.caseId);
    }
  })
})
let detailedDialog: {
  visible: boolean,
  caseId: number,
  case: Case,
  look: (caseId: number, ca: Case) => void;
} = reactive({
  visible: false,
  caseId: null,
  case: null,
  look(caseId: number, ca: Case) {
    detailedDialog.visible = true;
    detailedDialog.caseId = caseId;
    detailedDialog.case = ca;
  }
})
let selectData = reactive({
  timeRange: [],
  showCases: computed(() => {
    if(!selectData.timeRange?.length) return caseList;
    let shows = [...caseList];
    if (selectData.timeRange?.length) {
      shows=Case.getInMediatorRangeDay(shows,selectData.timeRange[0],selectData.timeRange[1]);
    }
    return shows;
  })
})
//设置调解结果
let caseResultDialog: {
  visible: boolean,
  case: Case,
  mediatorResult: number,
  look: (cas: Case) => void,
  hidden: () => void,
  setResult: () => void
} = reactive({
  visible: false,
  case: null,
  mediatorResult: 0,
  setResult() {
    let c = caseResultDialog.case;
    //设置调解结果
    setMediationResult(caseResultDialog.case.caseId, caseResultDialog.mediatorResult).then((res) => {
      if (res) {
        Notice.success("修改成功")
        caseList.splice(caseList.indexOf(c), 1)//删除该案件
        caseIdSet.delete(c.caseId);
      }
      else Notice.error("修改失败")
    });

    caseResultDialog.hidden();
  },
  look(cas: Case) {
    caseResultDialog.case = cas;
    caseResultDialog.visible = true;
  },
  hidden() {
    caseResultDialog.visible = false;
    caseResultDialog.case = null;
  }
})

</script>
<style scoped lang="scss">
.cardContainer {
  height: 90%;
  .selectContainer {
    width: 100%;
    height: 40px;
    display: flex;
    flex-direction: row;
    justify-content: start;
    margin-bottom: 20px;
    .selectItem {
      display: flex;
      align-items: center;
      white-space: nowrap;
      width: 250px;
      margin-right: 20px;

      span {
        width: fit-content;
        margin-right: 10px;
      }
    }
  }

  .tableContainer {
    height:calc( 100% - 70px);
  }
}
</style>